<template>
  <div>
    <i v-show="isShowBtn && !hidden" class="el-icon-arrow-up" @click="topFunction" />
  </div>
</template>
<script>
export default {
  name: 'ArrowUp',
  data() {
    return {
      isShowBtn: false,
      scrollElement: undefined,
      hidden: false
    }
  },
  mounted() {
    // 当网页向下滑动 20px 出现"返回顶部" 按钮
    this.$nextTick(() => {
      window.addEventListener('scroll', (e) => {
        this.scrollElement = e.srcElement
        if (this.scrollElement.scrollTop > 200) {
          this.isShowBtn = true
        } else {
          this.isShowBtn = false
        }
      }, true)
    })
  },
  methods: {
    topFunction() {
      if (this.scrollElement) {
        this.scrollElement.scrollTop = 0
      }
    },
    show() {
      this.hidden = false
    },
    hide() {
      this.hidden = true
    }
  }
}
</script>
<style scoped>
.el-icon-arrow-up {
  position: fixed;
  bottom: 50px;
  right: 40px;
  z-index: 9999;
  border: none;
  outline: none;
  background-color: rgb(119, 118, 118);
  cursor: pointer;
  padding: 15px;
  color: white;
  border-radius: 50%;
}

.el-icon-arrow-up:hover {
  background-color: #555;
}
</style>
